<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <style>
        .layui-form {
            margin-top: 20px;
        }

        .demo-login-container {
            width: 300px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<form class="layui-form">
    <div class="demo-login-container">
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <input type="text" name="courseName" lay-verify="required" placeholder="请输入课程名称"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <select name="typeId">
                    <!--    <option value="">请选择课程类型</option>-->
                    <!--    <option value="1">单车类</option>
                        <option value="2">身心类</option>
                        <option value="3">训练类</option>
                        <option value="4">舞蹈类</option>-->
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <select name="coachId">
                   <!-- <option value="">请选择教练</option>
                    <option value="14">w</option>
                    <option value="15">build</option>
                    <option value="16">driver</option>
                    <option value="17">zio</option>-->
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <input type="number" name="price" lay-verify="required" placeholder="请输入课程价格" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <textarea name="comment" placeholder="请输入课程介绍"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                    <i class="layui-icon layui-icon-upload"></i>课程图片
                </button>
                <div style="width: 132px;">
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <button type="submit" class="layui-btn" lay-submit lay-filter="upload">添加课程</button>
            </div>
        </div>
    </div>
</form>


<script>
    layui.use(function () {
        let form = layui.form;
        let $ = layui.$;
        let layer = layui.layer;
        let upload = layui.upload;

        let fileName;  // 上传文件在服务器中的名字
        // 渲染
        upload.render({
            elem: '#ID-upload-demo-btn',
            url: '/course/upload', // 此处配置你自己的上传接口即可
            accept: 'images', // 图片
            before: function (obj) {
                // 预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                });
            },
            done: function (res) {
                fileName = res.data;  //  uuid
                console.log(fileName)
            }
        });


        let $select = $('select[name=typeId]');
        $select.append('<option value="">请选择课程</option>');
        $.get('/courseType/types', function (res) {
            let courseTypeList = res.data
            console.log(courseTypeList)
            // 遍历
            courseTypeList.forEach(courseType => {
                let opt;
                if (courseType.isDelete) {
                    opt = $('<option disabled value="' + courseType.id + '">' + courseType.type + '</option>')
                } else {
                    opt = $('<option  value="' + courseType.id + '">' + courseType.type + '</option>')
                }
                $select.append(opt)
            })
            form.render()
        })

        let $select1 = $('select[name=coachId]');
        $select1.append('<option value="">请选择教练</option>');
        $.get('/coach/list', function (res) {
            let instructorLists = res.data
            // 遍历
            instructorLists.forEach(instructorList => {
                let opt;

                opt = $('<option  value="' + instructorList.id + '">' + instructorList.coachName + '</option>')

                $select1.append(opt)
            })
            form.render()
        })
        form.on("submit(upload)", function (obj) {
            let formData = obj.field;
            //  动态赋值    let obj = {}      obj.username = tom
            formData.img = fileName    // {title,uuid}
            console.log(formData)
            $.post("/course/uploadInfo", formData, function (res) {
                if (res.code == 0) {
                    layer.msg(res.msg, {icon: 1}, function () {
                        // 关闭弹出层
                        let index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
                        parent.layer.close(index);
                    })
                } else {
                    layer.msg(res.msg, {icon: 2})
                }
            })
            return false;
        })
    })
</script>
</body>
</html>